<template>
	<div class="changePassword_page layer">
		<van-nav-bar :title="$t('my.transactionPassword')" left-arrow @click-left="$router.go(-1)" :border="false" />
		<div class="cont">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm" label-position="top"
				hide-required-asterisk>
				<el-form-item :label="type == 1 ? $t('phone') : $t('email')" prop="account" v-if="userInfo.sec_password">
					<el-input v-model="ruleForm.username" :placeholder="type == 1 ? $t('login.phoneNumber') : $t('login.email')"
						:class="type == 1 ? 'phone_input' :''" disabled>
						<div v-if="type == 1" slot="prefix" class="flex_prefix">
							<img src="@/assets/images/login/phone.png" class="icon" />
							<div class="area_code">
								<span>{{ruleForm.area_code}}</span>
								<i class="el-icon-caret-bottom"></i>
							</div>
						</div>
						<!-- <img src="@/assets/images/login/emil.png" slot="prefix" class="icon" v-else /> -->
					</el-input>
				</el-form-item>
				<el-form-item :label="$t('forgot.smsCode')" prop="captcha" class="sms" v-if="userInfo.sec_password">
					<el-input v-model="ruleForm.captcha" :placeholder="$t('forgot.smsCode')">
						<div class="downtime" :style="dwonCodeText ? 'color: #fff' : ''" @click="handleSms" slot="suffix">
							{{dwonCodeText ? dwonCodeText : codeText}}
						</div>
					</el-input>
				</el-form-item>
				<!-- <el-form-item :label="$t('my.oldPassword')" prop="old_sec_password" v-if="userInfo.sec_password">
					<el-input v-model="ruleForm.old_sec_password" :placeholder="$t('login.password')"
						:type="showPaw0 ? 'text' : 'password'"
						@input="(val) => ruleForm.old_sec_password = val.replace(/[^0-9]/g,'' )" maxlength="6">
						<img :src="require(`@/assets/images/login/${showPaw0 ? 'hide' : 'show'}.png`) " slot="suffix"
							class="paw_icon" @click="showPaw0 = !showPaw0" />
					</el-input>
				</el-form-item> -->
				<el-form-item :label="$t('my.transactionPassword')" prop="sec_password">
					<el-input v-model="ruleForm.sec_password" :placeholder="$t('login.password')"
						:type="showPaw1 ? 'text' : 'password'" @input="(val) => ruleForm.sec_password = val.replace(/[^0-9]/g,'' )"
						maxlength="6">
						<img :src="require(`@/assets/images/login/${showPaw1 ? 'hide' : 'show'}.png`) " slot="suffix"
							class="paw_icon" @click="showPaw1 = !showPaw1" />
					</el-input>
				</el-form-item>
				<el-form-item :label="$t('my.repeatTransactionPassword')" prop="password2">
					<el-input v-model="ruleForm.password2" :placeholder="$t('login.password')"
						:type="showPaw2 ? 'text' : 'password'" @input="(val) => ruleForm.password2 = val.replace(/[^0-9]/g,'' )"
						maxlength="6">
						<img :src="require(`@/assets/images/login/${showPaw2 ? 'hide' : 'show'}.png`) " slot="suffix"
							class="paw_icon" @click="showPaw2 = !showPaw2" />
					</el-input>
					<p class="tips">{{$t('my.repeatTips')}}</p>
				</el-form-item>
			</el-form>
		</div>
		<el-button class="submit_but" @click="submit">{{$t('confirm')}}</el-button>
	</div>
</template>

<script>
	import {
		userSetSecpassword
	} from '@/api/my'
	import {
		smsSend,
		emsSend,
		userRpwPrefix
	} from '@/api/home'
	export default {
		components: {},
		data() {
			return {
				intimer: null,
				dwonCodeText: '',
				type: 1,
				showPaw0: false,
				showPaw1: false,
				showPaw2: false,
				ruleForm: {
					username: '',
					area_code: '1',
					captcha: '',
					old_sec_password: '',
					sec_password: '',
					password2: '',
				},
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
			codeText: {
				get() {
					return this.$t('forgot.get')
				},
				set(val) {
					// console.log('val', val);
					return val
				}
				// return this.$t('message.get')
			},
			rules() {
				var validatePass = (rule, value, callback) => {
					var reg = /^\d{6}$/
					if (value === '') {
						callback(new Error(this.$t('login.password')))
					} else if (!reg.test(value)) {
						callback(new Error(this.$t('my.passValidate')))
					} else {
						callback()
					}
				}
				var validatePass2 = (rule, value, callback) => {
					if (value === '') {
						callback(new Error(this.$t('forgot.password2')))
					} else if (value !== this.ruleForm.sec_password) {
						callback(new Error(this.$t('forgot.twicePassword2')))
					} else {
						callback()
					}
				}
				let obj = {
					captcha: [{
						required: true,
						message: this.$t('forgot.verification'),
						trigger: 'change'
					}],
					old_sec_password: [{
						required: true,
						message: this.$t('login.password'),
						trigger: 'change'
					}],
					sec_password: [{
						required: true,
						validator: validatePass,
						trigger: 'blur'
					}],
					password2: [{
						required: true,
						validator: validatePass2,
						trigger: 'blur'
					}]
				}
				return obj
			}
		},
		watch: {},
		mounted() {
			// console.log('userInfo', this.userInfo);
			if (this.userInfo.sec_password) {
				this.init()
			}
		},
		methods: {
			async init() {
				const res = await userRpwPrefix({
					account: this.userInfo.username
				})
				if (res && res.code == 1) {
					this.type = Boolean(res.data.mobile) ? 1 : 2
					this.ruleForm.username = res.data.mobile || res.data.email
					this.ruleForm.area_code = res.data.area_code
				} else {
					this.$message.error(res.msg)
				}
				// console.log('res', res);
			},
			submit() {
				this.$refs.ruleForm.validate(async (valid) => {
					if (valid) {
						// alert('submit!');
						// console.log('********', {
						// 	...this.ruleForm,
						// 	type: this.type == 1 ? 'mobile' : 'email',
						// });
						const res = await userSetSecpassword({
							...this.ruleForm,
							type: this.type == 1 ? 'mobile' : 'email',
						})
						if (res && res.code == 1) {
							this.$store.dispatch('getUserInfo');
							this.$toast.success(res.msg)
							this.$router.go(-1)
						} else {
							this.$toast.fail(res.msg)
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			async handleSms() {
				// this.$refs.ruleForm.validateField('account', async (valid) => {
				// if (!valid) {
				if (this.intimer) return
				let res;
				if (this.type == 1) {
					res = await smsSend({
						account: this.userInfo.username,
						mobile: this.ruleForm.username,
						event: 'resetpwd',
						area_code: this.ruleForm.area_code
					})
				} else {
					res = await emsSend({
						account: this.userInfo.username,
						email: this.ruleForm.username,
						event: 'resetpwd'
					})
				}
				// console.log('res', res);
				if (res && res.code == 1) {
					let time = 60
					this.codeText = '60s'
					this.intimer = setInterval(() => {
						this.dwonCodeText = (--time) + 's'
						if (time <= 0) {
							clearInterval(this.intimer)
							this.intimer = null
							this.dwonCodeText = '';
							this.codeText = this.$t('forgot.get')
						}
					}, 1000)
					this.$toast.success(res.msg)
				} else {
					this.$toast.fail(res.msg)
				}
				// }
				// })
			},
		}
	}
</script>

<style scoped lang="less">
	.changePassword_page {
		.ruleForm {
			text-align: left;

			::v-deep .el-form-item {
				margin-bottom: 30px;
			}

			::v-deep .el-form-item__label {
				line-height: unset;
				color: #fff;
			}

			::v-deep .el-input__inner {
				border: 0;
				border-radius: 16px;
				background-color: #3D3D3D;
				color: #fff;
				padding: 0 15px;
				height: 50px;
				line-height: 50px;

				&::placeholder {
					color: #999;
				}
			}

			::v-deep .el-form-item__content {
				line-height: 50px;
			}

			.paw_icon {
				width: 22px;
				height: 22px;
				vertical-align: sub;
				margin-right: 10px;
			}

			.tips {
				line-height: normal;
				margin-top: 20px;
				font-size: 12px;
			}
			::v-deep .phone_input {
				.el-input__inner {
					padding-left: 87px;
				}
			}
			
			::v-deep .sms {
				.el-input__inner {
					padding-right: 40px;
				}
			}
			
			::v-deep .el-input__prefix {
				top: 50%;
				transform: translateY(-50%);
				height: auto;
				display: inline-block;
			
				.icon {
					width: 22px;
					height: 22px;
					vertical-align: sub;
					margin-right: 10px;
				}
			}
			
			.flex_prefix {
				width: 78px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			
				.icon {
					width: 22px;
					height: 22px;
					vertical-align: sub;
					margin-right: 10px;
				}
			
				.area_code {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-around;
			
					span {
						font-size: 14px;
						color: #fff;
					}
			
					i {
						font-size: 14px;
						color: #fff;
					}
				}
			}
		}

		.submit_but {
			margin-top: 30px;
		}
	}
</style>